<template>
    <div class="page-container">
        <div class="tree-content">
            <div class="tree-title">字典分类</div>
            <el-tree :data="tree.data" :props="tree.defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="grid-content">
            <div class="grid-form-container">
                <!-- <div class="operation"> -->
                <!-- 自己加点击事件 -->
                <el-button type="primary" @click="addGroup">添加分类</el-button>
                <el-popconfirm
                    title="此操作将删除当前分类及其所有子项，是否继续？"
                    confirmButtonText="确定"
                    cancelButtonText="再考虑一下"
                    @confirm="deleteGroup"
                >
                    <template #reference>
                        <el-button>删除分类</el-button>
                    </template>
                </el-popconfirm>
                <el-button type="primary" @click="addProperty">添加字典项</el-button>
                <el-button @click="deleteProperty">删除字典项</el-button>
                <!-- </div>
                <div class="search">
                    <el-input v-model="query.label" class="search-input-class" placeholder="数据项名称" />
                    <el-button type="primary" @click="loadData">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                </div> -->
            </div>
            <div class="grid-container">
                <el-table
                    ref="datagrid"
                    :data="table.data"
                    border
                    style="width: 100%"
                    @row-click="handleClickTableRow"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" />
                    <!-- 修改列 -->
                    <el-table-column prop="groupCode" label="类别编码" width="160" />
                    <el-table-column prop="value" label="字典项编码" width="120" />
                    <el-table-column prop="label" label="字典项名称" show-overflow-tooltip />
                    <el-table-column prop="sortIndex" label="排序" width="100" />
                    <el-table-column prop="description" label="描述" show-overflow-tooltip />
                </el-table>
            </div>
            <div class="pagination-container">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="table.pagination.currentPage"
                    :page-sizes="table.pagination.pageSizes"
                    :page-size="table.pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="table.pagination.total"
                ></el-pagination>
            </div>
            <el-dialog
                title="数据字典分类"
                v-model="showGroupDialog"
                width="400px"
                :lock-scroll="true"
                :close-on-click-modal="false"
                destroy-on-close
            >
                <div class="dialog-content">
                    <div class="menu-form">
                        <div class="form-item">
                            <div class="label-class">上级分类</div>
                            <div class="content-class">
                                <el-input
                                    v-model="tree.groupForm.pName"
                                    class="form-input-class"
                                    placeholder="选择左侧分类树带出"
                                    readonly
                                ></el-input>
                            </div>
                        </div>
                        <!-- <div class="form-item">
                            <div class="label-class">分类编码</div>
                            <div class="content-class">
                                <el-input v-model="tree.groupForm.code" class="form-input-class" placeholder="请输入角色编码"></el-input>
                            </div>
                        </div> -->
                        <div class="form-item">
                            <div class="label-class">分类名称</div>
                            <div class="content-class">
                                <el-input
                                    v-model="tree.groupForm.name"
                                    class="form-input-class"
                                    placeholder="请输入角色名称"
                                ></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="showGroupDialog = false">取 消</el-button>
                        <el-button type="primary" @click="onGroupSubmit">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
            <el-dialog
                title="数据字典分类"
                v-model="showDialog"
                width="400px"
                :lock-scroll="true"
                :close-on-click-modal="false"
                destroy-on-close
            >
                <div class="dialog-content">
                    <div class="menu-form">
                        <div class="form-item">
                            <div class="label-class">类别</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.groupName"
                                    class="form-input-class"
                                    placeholder="选择左侧分类树带出"
                                    readonly
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">字典项编码</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.value"
                                    class="form-input-class"
                                    placeholder="请输入字典项编码"
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">字典项名称</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.label"
                                    class="form-input-class"
                                    placeholder="请输入字典项名称"
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">排序</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.sortIndex"
                                    class="form-input-class"
                                    placeholder="请输入字典项排序"
                                ></el-input>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="label-class">描述</div>
                            <div class="content-class">
                                <el-input
                                    v-model="form.description"
                                    type="textarea"
                                    class="form-input-class"
                                    placeholder="请输入字典项描述"
                                ></el-input>
                            </div>
                        </div>
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="showDialog = false">取 消</el-button>
                        <el-button type="primary" @click="onSubmit">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { ref, toRefs, reactive, onMounted } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import http from '@/http.js'
import treeUtil from '@/utils/tree.js'
import formatUtil from '@/utils/format.js'

export default {
    // 修改组件名称
    name: 'Dictionary',
    setup() {
        const router = useRouter()
        const route = useRoute()
        const datagrid = ref(null)

        const state = reactive({
            // 修改查询参数
            query: {
                label: ''
            },
            table: {
                data: [],
                selected: [],
                pagination: {
                    currentPage: 1,
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
            tree: {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                groupForm: {
                    id: '',
                    pId: '',
                    pName: '',
                    label: ''
                },
                currentNode: null
            },
            form: {
                id: '',
                groupId: '',
                groupCode: '',
                groupName: '',
                label: '',
                value: '',
                sortIndex: 1,
                description: ''
            },
            showDialog: false,
            showGroupDialog: false
        })

        const handleSelectionChange = (val) => {
            state.table.selected = val
        }

        const handleSizeChange = (val) => {
            state.table.pagination.pageSize = val
            loadData(state.tree.currentNode.id)
        }

        const handleCurrentChange = (val) => {
            state.table.pagination.currentPage = val
            loadData(state.tree.currentNode.id)
        }

        const handleClickTableRow = (row) => {
            datagrid.value.clearSelection()
            datagrid.value.toggleRowSelection(row)
        }

        const loadData = (groupId) => {
            // 修改查询参数
            let params = {
                groupId: groupId,
                page: state.table.pagination.currentPage,
                pageSize: state.table.pagination.pageSize
            }
            // 修改请求地址
            http.fetchForm({
                url: '/sys/dictionary/queryGrid',
                data: params
            }).then((res) => {
                state.table.data = res.data.grid
                state.table.pagination.total = res.data.total
            })
        }

        // const reset = () => {
        //     state.query.param1 = '';
        //     state.query.param2 = '';
        //     loadData();
        // }

        const handleNodeClick = (res) => {
            state.tree.currentNode = res
            loadData(res.id)
        }

        const loadGroupData = () => {
            http.fetchForm({
                url: '/sys/dictionary/queryGroupList',
                method: 'get',
                data: {}
            }).then((res) => {
                state.tree.data = treeUtil.generateDictionaryTreeData('', '', res.data)
            })
        }

        const addGroup = () => {
            if (state.tree.currentNode != null) {
                state.tree.groupForm.pId = state.tree.currentNode.id
                state.tree.groupForm.code = state.tree.currentNode.code
                state.tree.groupForm.pName = state.tree.currentNode.label
                state.showGroupDialog = true
            } else {
                ElNotification({
                    title: '提示',
                    message: '请选择节点后再添加分类',
                    type: 'info'
                })
            }
        }

        const deleteGroup = () => {
            http.fetchForm({
                url: '/sys/dictionary/deleteGroupById',
                method: 'post',
                data: {
                    id: selected[0].id
                }
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                })
                loadGroupData()
            })
        }

        const onGroupSubmit = () => {
            let params = state.tree.groupForm
            http.fetchJson({
                url: '/sys/dictionary/saveGroup',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '保存成功',
                    type: 'success'
                })
                state.showGroupDialog = false
                loadGroupData()
            })
        }

        const addProperty = () => {
            if (state.tree.currentNode != null) {
                state.form.groupId = state.tree.currentNode.id
                state.form.groupCode = state.tree.currentNode.code
                state.form.groupName = state.tree.currentNode.label
                state.form.id = ''
                state.form.label = ''
                state.form.value = ''
                state.form.sortIndex = 1
                state.form.description = ''
                state.showDialog = true
            } else {
                ElNotification({
                    title: '提示',
                    message: '请选择节点后再添加字典项',
                    type: 'info'
                })
            }
        }

        const deleteProperty = () => {
            let selected = state.table.selected
            if (selected.length == 0) {
                ElNotification({
                    title: '提示',
                    message: '请选择要删除的字典项',
                    type: 'info'
                })
                return
            }
            http.fetchForm({
                url: '/sys/dictionary/deleteById',
                method: 'post',
                data: {
                    id: selected[0].id
                }
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '删除成功',
                    type: 'success'
                })
                loadData(state.tree.currentNode.id)
            })
        }

        const onSubmit = () => {
            let params = state.form
            http.fetchJson({
                url: '/sys/dictionary/save',
                data: params
            }).then((res) => {
                ElNotification({
                    title: '提示',
                    message: '保存成功',
                    type: 'success'
                })
                state.showDialog = false
                loadData(state.tree.currentNode.id)
            })
        }

        onMounted(() => {
            // loadData();
            loadGroupData()
        })

        return {
            ...toRefs(state),
            formatUtil,
            datagrid,
            handleSelectionChange,
            handleSizeChange,
            handleCurrentChange,
            handleClickTableRow,
            loadData,
            // reset,
            handleNodeClick,
            addGroup,
            deleteGroup,
            onGroupSubmit,
            addProperty,
            deleteProperty,
            onSubmit
        }
    }
}
</script>
<style scoped>
.page-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: scroll;
    overflow-x: hidden;
    display: flex;
}

.tree-content {
    width: 220px;
    height: 100%;
    padding: 10px;
    border-right: 1px solid #eee;
    overflow: auto;
    overflow-x: hidden;
}

.tree-title {
    padding: 10px;
    font-size: 14px;
    color: #464c5b;
    font-weight: bold;
}

:deep(.el-tree-node__content) {
    height: 30px;
}

:deep(.el-tree-node__label) {
    font-size: 12px;
}

.grid-content {
    width: calc(100% - 220px);
    height: 100%;
}

.grid-form-container {
    width: 100%;
    padding: 20px 10px 10px 10px;
    /*display: flex;
    justify-content: space-between;*/
}

.search {
    display: flex;
}

.search-input-class {
    width: 180px;
    margin-right: 10px;
}

.grid-container {
    padding: 10px 10px 0 10px;
}

.pagination-container {
    padding: 10px;
}

.dialog-content {
    padding: 10px 20px;
}

.label-class {
    width: 100%;
    padding: 10px 0;
    font-size: 12px;
    color: #657180;
    font-weight: bold;
}

.content-class {
    width: 100%;
    padding: 0 0 10px 0;
}

.form-input-class {
    width: 100%;
}
</style>
